<template>
  <view :class="['container', 'vh100', { dark: theme == 'dark' }]">
    <view :class="['drlng', 'me-card', 'funs', { darksss: theme == 'dark' }]">
      <view :class="['flex', 'acc', { accdarksscs: theme == 'dark' }]">
        <view
          :class="['accItem', tabIndex == i ? 'accItemActive' : '']"
          v-for="(tab, i) in tabBars"
          :key="i"
          :id="i"
          :data-current="i"
          @click="tapTab(i)"
          >{{ tab.name }}</view
        >
      </view>
      <view
        class="plr10 ptb15 mt10 bgPart"
        style="min-height: 80vh"
      >
        <view class="pb100">
          <view class="flex alcenter ptb10 bdb_blue3 nWhite">
            <view class="flex1 fx2 ritss">{{ $t('bico.W288') }}</view>
            <view class="flex1 fx2 ritss">{{ $t('bico.W289') }}</view>
            <view class="flex1 fx2 tr4 ritss">{{ $t('bico.W290') }}</view>
            <view class="flex1 fx2 tr5 ritss">{{ $t('bico.W291') }}</view>
          </view>
          <view
            class="flex bdb_blue3 ptb5"
            v-for="(tab, i) in logList"
          >
            <view class="flex1 fx2 rits">{{ tab.flowCoin }}</view>
            <!-- <view class="flex1 fx2 rits">{{ typeMap(tab.fType) }}</view> -->
			<view class="flex1 fx2 rits">{{ tab.flowType }}</view>
            <view class="flex1 fx2">{{ tab.symbol + tab.flowPrice }}</view>
            <view class="flex1 tr3">{{ tab.createTime }}</view>
          </view>
          <view
            class="mt20 tc"
            v-show="logList.length <= 0"
          >
            <image
              src="/static/image/nodata.png"
              class="h30 wt30"
            ></image>
            <view>{{ $t('home.norecord') }}</view>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>
<script>
import { mapState, mapActions, mapGetters } from 'vuex';
import { cashflow } from '../../common/apiString.js';
import typeMap from '../../common/cashFlowType.js';
export default {
  data() {
    return {
      tabIndex: 0,
      tabBars: [
        {
          //钱包
          name: this.$t('bico.W278'),
          id: 'WALLET'
        },
        // {
        //   //币币
        //   name: this.$t('bico.W279'),
        //   id: 'CURRENCY'
        // },
        {
          //合约
          name: this.$t('bico.W280'),
          id: 'CONTRACT'
        },

        // {
        //   // 保险
        //   name: this.$t('assets.lever3'),
        //   // id: 'LEGAL'
        //   id: 'insurance'
        // }
        {//期权
         	name: this.$t('bico.W282'),
         	id: 'OPTION'
        },
		{
		  //法币
		  name: this.$t('bico.W822'),
		  id: 'LEGAL'
		},
		{
		  //现货合约
		  name: this.$t('bico.W823'),
		  id: 'ROBOT'
		}
      ],
      logList: []
    };
  },
  computed: {
    ...mapState({
      theme: state => state.theme
    })
  },
  onLoad() {
    uni.setNavigationBarTitle({
      title: this.$t('bico.W292')
    });
    if (uni.getStorageSync('token') && !uni.getStorageSync('isFinger')) {
      this.isFinger = uni.getStorageSync('fingerBool');
      this.isface = uni.getStorageSync('isface');
      if (this.isFinger) {
        uni.hideTabBar();
      }
    }
  },
  onPullDownRefresh() {
    this.getLog();
  },
  mounted() {
    //this.getAssets();
	console.log(223,this.tabBars)
  },
  onShow() {
    // this.getAssets();
    uni.setNavigationBarColor({
      frontColor: '#ffffff',
      backgroundColor: '#ffffff',
      title: this.$t('bico.3')
    });
    this.$utils.setTheme(this.theme);
    this.getLog();
  },
  methods: {
    typeMap(val) {
      return typeMap(val);
    },
    tapTab(index) {
      this.tabIndex = index;
      this.getLog();
    },
    getLog() {
      let dto = {
        type: this.tabBars[this.tabIndex].id,
        size: 99999999
      };
      // uni.showLoading()
      this.$utils.initDataToken({ url: cashflow, type: 'GET', data: dto }, res => {
        uni.stopPullDownRefresh();
        // uni.hideLoading()
        this.logList = res.records.records;
      });
    }
  }
};
</script>

<style lang="scss">
.fixedTop {
  width: 100%;
  /* position: fixed; */
  top: 0vw;
  left: 0;
  z-index: 10;
}
.searchBtn {
  color: #808080;
  margin-left: 4vw;
  line-height: 5.5vw;
  padding: 1.3vw 0.5vw 1vw 2.5vw;
  width: 12vw;
  font-size: 3vw;
  height: 8vw;
  border: solid 1px #dadce8;
  border-radius: 1vw;
}
.flex {
  display: flex;
  align-items: center;
}
.container {
  min-height: 100%;
  display: flex;
  flex-direction: column;
}
.llllll {
  padding-top: 0vw;
}
.gggg {
  color: #999;
}
.right {
  text-align: right;
}
.listItemB > view {
  font-weight: bold;
  flex: 1;
  font-size: 26rpx;
}
.listItemC {
  padding: 24rpx 0 10rpx;
}
.listItemC > view {
  color: #7e808c;
  flex: 1;
  font-size: 3vw;
}
.listItem {
  padding: 3vw 0;
  border-bottom: solid 1rpx #f8f8f8;
}
.darksscs {
  border-bottom: solid 0.5px #37394059 !important;
}
.accdarksscs {
  background-color: #061623 !important;
  border-bottom: solid 6rpx #333 !important;
}
.listItemT {
  justify-content: space-between;
}
.listItemTV {
  font-weight: bold;
  font-size: 28rpx;
}
.icon-right-1-copy {
  font-size: 26rpx;
  color: #999;
}
.list {
  padding: 0 32rpx;
}
.tt1b {
  padding-top: 0px;
  justify-content: space-between;
}
.icon-search {
  font-size: 20rpx;
}
.tt1bb {
  padding: 1.3vw 3.5vw 1vw 4vw;
  width: 20vw;
  height: 8vw;
  border: solid 1px #dadce8;
  border-radius: 1vw;
}
.input {
  flex: 1;
  padding-left: 14rpx;
}
.chec {
  transform: scale(0.7);
}
.checText {
  font-size: 12px;
  color: grey;
}
.tt1 {
  padding: 0vw 4vw 4vw;
  border-bottom: solid 0.5px #f8f8f8;
}
.tt1t {
  color: #999;
  font-size: 30rpx;
}
.tt1t11 {
  color: #000;
  font-size: 38rpx;
  margin-right: 10rpx;
}
.tt1t1 {
  align-items: baseline;
}
.tt1t12 {
  color: #999;
}

.acc {
  border-bottom: solid 3px #f8f8f8;
  text-align: center;
  justify-content: space-around;
  border-radius: 3vw 3vw 0vw 0vw;
  background-color: #fff;
  padding: 4vw 0vw 0vw;
  position: relative;
  top: 0vw;
}
.accItem {
  position: relative;
  top: 1vw;
  padding-bottom: 4vw;
  font-size: 3.6vw;
  font-weight: 700;
  text-align: center;
  /* color: #424242; */
  border-bottom: solid 6rpx transparent;
}
.accItemActive {
  color: #3e38ec;
  border-bottom: solid 6rpx #3e38ec;
}
.opts {
  padding: 4vw 0vw 10vw 0vw;
  border-top: solid 1rpx rgba(0, 0, 0, 0.1);
  justify-content: space-between;
}
.optsItem {
  color: #f3f3f3;
  flex: 1;
  justify-content: center;
}
.optsItem2 {
  border-left: solid 1rpx #e9e9e9;
  border-right: solid 1rpx #e9e9e9;
}
.optsItem3 {
  border-right: solid 1rpx #e9e9e9;
}
.optsItemText {
  margin-left: 2vw;
  font-size: 3.6vw;
  font-weight: 600;
}
.top {
  padding: 12vw 0 0;
  background-color: #3e38ec;
}
.totalView {
  padding: 0vw 5vw;
  color: #fff;
  position: absolute;
  top: 4vw;
  left: 0;
}
.totalText {
  font-size: 18px;
  font-weight: bold;
}
.icon-yanjing2 {
  color: #fff;
  margin-left: 20rpx;
  font-size: 24rpx;
}
.icon-yanjing3 {
  color: #fff;
  margin-left: 20rpx;
  font-size: 36rpx;
}
.botalNumView {
  padding: 0vw 4vw 4vw 5vw;
  align-items: baseline;
}
.botalNumView1 {
  color: #fff;
  margin-right: 10rpx;
  font-size: 40rpx;
}
.botalNumView2 {
  color: #fff;
}
.rits {
  font-size: 12px;
}
.ritss {
  font-size: 3.4vw;
  font-weight: 700;
}
.tr2 {
  text-align: right;
  position: relative;
  left: -10vw;
}
.tr3 {
  text-align: right;
  position: relative;
  left: 0vw;
}
.tr4 {
  text-align: right;
  position: relative;
  left: -10vw;
}
.tr5 {
  text-align: right;
  position: relative;
  left: 0vw;
}
</style>
